<template>
    <div class="main_content">
        <div class="content">
            <div class="search">
                <div class="list">
                    <el-button
                        v-for="(item, index) in platformList"
                        :key="index"
                        :type="item.id == platform ? 'primary' : 'info'"
                        size="small"
                        plain
                        @click="getPlatform(item)"
                        style="margin-right: 10px"
                        >{{ item.name }}</el-button
                    >
                </div>
            </div>
            <div class="search" style="padding-top: 0px">
                <div class="list">
                    <el-button
                        :type="!btnList.includes('sys/rule/add') ? 'info' : 'primary'"
                        @click="updateRow(0)"
                        :disabled="!btnList.includes('sys/rule/add')"
                        size="small"
                        plain
                        >添加用户权限</el-button
                    >
                </div>
            </div>
            <div class="table" v-loading="loading">
                <el-table :data="list" :height="tableHeight" row-key="ruleId" :tree-props="{children: 'children',hasChildren: 'hasChildren'}">
                    <el-table-column label="名称" prop="ruleName" ></el-table-column>
                    <el-table-column label="简称" prop="shortName"></el-table-column>
                    <el-table-column label="编码" prop="code"></el-table-column>
                    <el-table-column label="类型">
                        <template slot-scope="scope">
                            <span v-if="scope.row.type == 1">模块</span>
                            <span v-if="scope.row.type == 2">页面</span>
                            <span v-if="scope.row.type == 3">按钮</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="外链">
                        <template slot-scope="scope">
                            <span v-if="scope.row.pageType == 1">-</span>
                            <span v-if="scope.row.pageType == 2">是</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="排序" prop="index">
                    </el-table-column>
                    <el-table-column label="访问路径" prop="path">
                    </el-table-column>
                    <el-table-column label="状态">
                        <template slot-scope="scope">
                            <div v-if="scope.row.status == 1">
                                <!-- <Icon type="md-checkmark-circle" style="color: #ccc; font-size: 18px" /> -->
                                <span class="green">启用</span>
                            </div>
                            <div v-if="scope.row.status == 0">
                                <!-- <img src="../../assets/images/sys/dept/disable.png" width="15" height="15" style="vertical-align: middle" /> -->
                                <span class="red">禁用</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button
                                @click.native.prevent="updateRow(1, scope.row)"
                                type="text"
                                size="small"
                                :disabled="!btnList.includes('sys/rule/edit')"
                                >编辑</el-button
                            >
                            <el-button
                                v-if="scope.row.status == 0"
                                @click.native.prevent="enable(scope.row)"
                                type="text"
                                size="small"
                                :disabled="!btnList.includes('sys/rule/enable')"
                                v-preventReClick="1500"
                                >启用</el-button
                            >
                            <el-button
                                v-if="scope.row.status == 1"
                                @click.native.prevent="disabled(scope.row)"
                                type="text"
                                size="small"
                                :disabled="!btnList.includes('sys/rule/enable')"
                                v-preventReClick="1500"
                                >禁用</el-button
                            >
                            <el-button
                                style="color: red"
                                @click.native.prevent="removeRow(scope.row)"
                                type="text"
                                size="small"
                                :disabled="!btnList.includes('sys/rule/del')"
                                >删除</el-button
                            >
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>

        <!-- 新增、编辑 -->
        <Modal v-model="updateModal" :title="isAdd ? '添加权限' : '编辑权限'" :mask-closable="false" width="800px" class-name="updateModal" >
            <div class="modal">
                <h2>基本信息</h2>
                <div class="tag">
                    <div class="item1">
                        <span class="tip">*</span>
                        <span>权限类型:</span>
                        <Select v-model="type" style="width: 250px" placeholder="请选择权限类型" @on-change="getType" >
                            <Option v-for="item in ruleTypeList" :value="item.id" :key="item.id" >{{ item.name }}</Option>
                        </Select>
                    </div>
                    <div class="item1">
                        <span class="tip">*</span>
                        <span>权限名称:</span>
                        <Input v-model="ruleName" placeholder="请输入权限名称" style="width: 250px" clearable/>
                    </div>
                </div>
                <div class="tag">
                    <div class="item1">
                        <span class="tip">*</span>
                        <span>简称:</span>
                        <Input v-model="shortName" placeholder="请输入权限简称" style="width: 250px" clearable/>
                    </div>
                    <div class="item1">
                        <span class="tip">*</span>
                        <span>权限编码:</span>
                        <Input v-model="code" placeholder="请输入权限编码" style="width: 250px" clearable/>
                    </div>
                </div>
                <div class="tag" v-if="type===1">
                    <div class="item1">
                        <span class="tip">*</span>
                        <span>监管要求:</span>
                        <Select v-model="supervise" style="width: 250px" placeholder="请选择监管要求" @on-change="getSupervise" >
                            <Option v-for="item in superviseData" :value="item.key" :key="item.key" >{{ item.value }}</Option>
                        </Select>
                    </div>
                    <div class="item1">
                        <span class="tip">*</span>
                        <span>应用场景:</span>
                        <Select v-model="appScene" style="width: 250px" placeholder="请选择应用场景" @on-change="getAppScene" >
                            <Option v-for="item in appSceneData" :value="item.key" :key="item.key" >{{ item.value }}</Option>
                        </Select>
                    </div>
                </div>

                <h2>节点路径</h2>
                <div class="tag" v-show="type === 1 || type === 2">
                    <div class="item1">
                        <span class="tip">*</span>
                        <span>类型:</span>
                        <RadioGroup v-model="pageType">
                            <Radio :label="1">系统页面</Radio>
                            <Radio :label="2">外部链接</Radio>
                        </RadioGroup>
                    </div>
                    <div class="item1" v-show="pathFlag && platform == 1">
                        <span class="tip">*</span>
                        <span>访问路径:</span>
                        <Input v-model="path" placeholder="请输入访问路径" style="width: 250px" clearable/>
                    </div>
                </div>
                <div class="tag">
                    <div class="item1">
                        <span class="tip">*</span>
                        <span>排序:</span>
                        <Input v-model="sort" placeholder="请输入排序" style="width: 250px" clearable/>
                    </div>

                    <div class="item1" v-show="type === 1">
                        <span>描述:</span>
                        <Input v-model="content" placeholder="请输入描述" style="width: 250px" clearable/>
                    </div>
                </div>
                <div class="tag">
                    <div class="item1" v-if="type != 1 && flag">
                        <span>父节点:</span>
                        <treeselect
                            :options="pList"
                            placeholder="搜索父节点"
                            :disable-branch-nodes="type == 3"
                            @select="getPID"
                            style="width: 250px"
                            v-model="rules"
                        />
                        <!-- <span class="tip">*</span> -->
                    </div>
                </div>
                <!-- <div class="tag">
                    <div class="item1">
                        <span>图标:</span>
                        <RadioGroup v-model="iconType">
                            <Radio :label="1">手动上传</Radio>
                            <Radio :label="2">地址输入</Radio>
                        </RadioGroup>
                    </div>
                </div> -->
                <div class="tag">
                    <div class="item1 imgList">
                        <span>选中图标:</span>
                        <el-upload
                            name="img"
                            class="avatar-uploader"
                            :headers="headers"
                            :action="$axios.defaults.baseURL + '/ms/api/rule/img'"
                            :show-file-list="false"
                            :on-success="response => imgSuccess(response, 'select')"
                            :before-upload="beforeAvatarUpload"
                        >
                            <img v-if="iconPath" :src="iconPath" class="avatar" />
                            <i v-else class="el-icon-plus avatar-uploader-icon" ></i>
                            <div v-if="iconPath" class="item_close" @click.stop="iconPath = ''" >
                                <Icon type="ios-close-circle" style="color: red; font-size: 20px" />
                            </div>
                        </el-upload>
                    </div>
                    <div class="item1 imgList">
                        <span>未选中图标:</span>
                        <el-upload
                            name="img"
                            class="avatar-uploader"
                            :headers="headers"
                            :action="$axios.defaults.baseURL + '/ms/api/rule/img'"
                            :show-file-list="false"
                            :on-success="response => imgSuccess(response, 'unselect')"
                            :before-upload="beforeAvatarUpload"
                        >
                            <img v-if="iconUnselect" :src="iconUnselect" class="avatar" />
                            <i v-else class="el-icon-plus avatar-uploader-icon" ></i>
                            <div v-if="iconUnselect" class="item_close" @click.stop="iconUnselect = ''" >
                                <Icon type="ios-close-circle" style="color: red; font-size: 20px" />
                            </div>
                        </el-upload>
                    </div>
                </div>
                <!-- <div class="tag" v-show="iconType === 2">
                    <div class="item1">
                        <span></span>
                        <Input v-model="iconPath" placeholder="请输入图标名称" style="width: 250px" >
                            <span slot="append">.png</span>
                        </Input>
                    </div>
                </div> -->
            </div>
            <div slot="footer">
                <el-button @click="cancel(1)" type="info" size="small" plain >取消</el-button>
                <el-button
                    @click="submitAll"
                    type="primary"
                    size="small"
                    plain
                    v-preventReClick="1500"
                    >保存</el-button
                >
            </div>
        </Modal>

        <Modal v-model="deteleModal" title="删除" width="360px;" :mask-closable="false" >
            <div style="margin: 10px">确定要删除这条数据吗？</div>
            <div slot="footer">
                <el-button @click="cancel(2)" type="info" size="small" plain >取消</el-button>
                <el-button @click="detele" type="primary" size="small" plain v-preventReClick="1500" >确定</el-button>
            </div>
        </Modal>
    </div>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {
    getRuleModuleList,
    getRuleDescendantList,
    getRuleAdd,
    getRuleEdit,
    getRuleDel,
    getRuleEnable,
    getRuleDisable,
} from "@/api/api.js";
import { bubbleSort } from "@/sever/config.js";
import { ruleTree } from "@/sever/rule.js";
import { superviseOptions, appSceneOptions} from "@/util/selectOption"
export default {
    components: { Treeselect },
    data() {
        return {
            headers: {
                Authorization:localStorage.getItem('COOKIE'),
            },
            list: [],
            updateModal: false,
            isAdd: true,
            ruleName: "",
            shortName: "",
            code: "",
            type: "",
            path: "",
            pid: "",
            sort: "",
            iconPath: "",
            iconUnselect: "",
            content: "",
            pageType: 1,
            supervise: "", // 监管要求
            superviseData: superviseOptions,
            appScene: "", // 应用场景
            appSceneData: appSceneOptions,
            ruleTypeList: [
                {
                    id: 1,
                    name: "模块",
                },
                {
                    id: 4,
                    name: "子模块",
                },
                {
                    id: 2,
                    name: "页面",
                },
                {
                    id: 3,
                    name: "按钮",
                },
            ],
            pList: [],
            flag: false,
            pathFlag: false,
            ruleId: "",
            deteleModal: false,
            removeId: "",
            btnList: [],
            platformList: [
                {
                    id: 1,
                    name: "后台权限",
                },
                {
                    id: 2,
                    name: "APP权限",
                },
            ],
            platform: 1,
            rules: null,
            arrList: [],
            tableHeight: window.innerHeight - 295,
            loading: false,
        };
    },
    methods: {
        imgSuccess(res, type) {
            if(type==="select"){
                this.iconPath = res.data.path;
            }else if(type==="unselect"){
                this.iconUnselect = res.data.path;
            }
            this.$Message.success("上传成功");
        },
        beforeAvatarUpload(file) {
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {
                this.$Message.error("上传头像图片大小不能超过 2MB!");
            }
            return;
        },
        getPlatform(item) {
            this.platform = item.id;
            this.getAllList();
        },
        getAllList() {
            this.loading = true
            let params = {
                platform: this.platform,
            };
            getRuleModuleList(params)
                .then((res) => {
                    this.loading = false
                    if (res.code == 200) {
                        let arr = ruleTree(res.data.list);
                        this.arrList = res.data.list;
                        for (let i = 0; i < arr.length; i++) {
                            if (
                                arr[i].type == 1 &&
                                arr[i].children &&
                                arr[i].children.length > 0
                            ) {
                                arr[i].children = bubbleSort(arr[i].children);
                                for (
                                    let j = 0;
                                    j < arr[i].children.length;
                                    j++
                                ) {
                                    if (
                                        arr[i].children[j].children &&
                                        arr[i].children[j].children.length > 0
                                    ) {
                                        arr[i].children[j].children =
                                            bubbleSort(
                                                arr[i].children[j].children
                                            );
                                    }
                                }
                            }
                        }
                        this.list = bubbleSort(JSON.parse(JSON.stringify(arr)));
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        getTreerule() {
            //展示模块和子模块
            for (let i = 0; i < this.list.length; i++) {
                if (this.list[i].type == 1) {
                    this.pList.push({
                        children: [],
                        id: this.list[i].ruleId,
                        label: this.list[i].ruleName,
                        name: this.list[i].ruleName,
                        title: this.list[i].ruleName,
                        type: this.list[i].type,
                        pid: this.list[i].pid,
                        status: this.list[i].status,
                    });
                }
            }
            for (let i = 0; i < this.list.length; i++) {
                if (this.list[i].children && this.list[i].children.length > 0) {
                    for (let j = 0; j < this.list[i].children.length; j++) {
                        if (this.list[i].children[j].type == 1) {
                            for (let k = 0; k < this.pList.length; k++) {
                                if (
                                    this.list[i].children[j].pid ==
                                    this.pList[k].id
                                ) {
                                    this.pList[k].children.push({
                                        id: this.list[i].children[j].ruleId,
                                        label: this.list[i].children[j]
                                            .ruleName,
                                        name: this.list[i].children[j].ruleName,
                                        title: this.list[i].children[j]
                                            .ruleName,
                                        type: this.list[i].children[j].type,
                                        pid: this.list[i].children[j].pid,
                                        status: this.list[i].children[j].status,
                                    });
                                }
                            }
                        }
                    }
                }
            }
            this.pList.forEach((i) => {
                if (i.children.length == 0) {
                    delete i.children;
                }
            });
        },
        getTreeList() {
            //展示模块，子模块 ，页面，模块子模块禁用
            let arr = [];
            this.arrList.forEach((i) => {
                if (i.type != 3) {
                    arr.push(i);
                }
            });
            this.pList = ruleTree(arr);
            for (let i = 0; i < this.pList.length; i++) {
                if (
                    this.pList[i].type == 1 &&
                    this.pList[i].children &&
                    this.pList[i].children.length > 0
                ) {
                    this.pList[i].children = bubbleSort(this.pList[i].children);
                    for (let j = 0; j < this.pList[i].children.length; j++) {
                        if (
                            this.pList[i].children[j].children &&
                            this.pList[i].children[j].children.length > 0
                        ) {
                            this.pList[i].children[j].children = bubbleSort(
                                this.pList[i].children[j].children
                            );
                        }
                    }
                }
            }
            this.pList = bubbleSort(this.pList);
            for (let i = 0; i < this.pList.length; i++) {
                this.pList[i]["id"] = this.pList[i].ruleId;
                this.pList[i]["label"] = this.pList[i].ruleName;
                this.pList[i]["name"] = this.pList[i].ruleName;
                this.pList[i]["title"] = this.pList[i].ruleName;
                //  this.pList[i]["isDisabled"] = true
                if (
                    this.pList[i].children &&
                    this.pList[i].children.length > 0
                ) {
                    for (let j = 0; j < this.pList[i].children.length; j++) {
                        this.pList[i].children[j]["id"] =
                            this.pList[i].children[j].ruleId;
                        this.pList[i].children[j]["label"] =
                            this.pList[i].children[j].ruleName;
                        this.pList[i].children[j]["name"] =
                            this.pList[i].children[j].ruleName;
                        this.pList[i].children[j]["title"] =
                            this.pList[i].children[j].ruleName;
                        if (this.pList[i].children[j].type == 1) {
                            if (
                                this.pList[i].children[j].children &&
                                this.pList[i].children[j].children.length > 0
                            ) {
                                for (
                                    let k = 0;
                                    k <
                                    this.pList[i].children[j].children.length;
                                    k++
                                ) {
                                    this.pList[i].children[j].children[k][
                                        "id"
                                    ] =
                                        this.pList[i].children[j].children[
                                            k
                                        ].ruleId;
                                    this.pList[i].children[j].children[k][
                                        "label"
                                    ] =
                                        this.pList[i].children[j].children[
                                            k
                                        ].ruleName;
                                    this.pList[i].children[j].children[k][
                                        "name"
                                    ] =
                                        this.pList[i].children[j].children[
                                            k
                                        ].ruleName;
                                    this.pList[i].children[j].children[k][
                                        "title"
                                    ] =
                                        this.pList[i].children[j].children[
                                            k
                                        ].ruleName;
                                }
                            } else {
                                delete this.pList[i].children[j].children;
                            }
                            // this.pList[i].children[j]["isDisabled"] = true
                        } else {
                            delete this.pList[i].children[j].children;
                        }
                    }
                } else {
                    delete this.pList[i].children;
                }
            }
        },
        updateRow(type, rows) {
            if (type == 0) {
                // 新增
                this.isAdd = true;
                this.flag = false;
                this.pathFlag = false;
                this.ruleName = "";
                this.shortName = "";
                this.code = "";
                this.supervise = "";
                this.appScene = "";
                this.type = "";
                this.pid = "";
                this.sort = "";
                this.path = "";
                this.iconPath = "";
                this.iconUnselect = "";
                this.content = "";
                this.pageType = 1;
                this.rules = null;
            } else if (type == 1) {
                // 编辑
                this.isAdd = false;
                this.ruleName = rows.ruleName;
                this.shortName = rows.shortName;
                this.code = rows.code;
                this.supervise = rows.supervise ? Number(rows.supervise) : rows.supervise;
                this.appScene = rows.appScene ? Number(rows.appScene) : rows.appScene;;
                if (rows.type == 1) {
                    if (rows.pid != 0) {
                        this.type = 4;
                    } else {
                        this.type = 1;
                    }
                } else {
                    this.type = rows.type;
                }
                this.sort = rows.index;
                this.path = rows.path;
                this.pid = rows.pid;
                this.rules = rows.pid;
                this.iconPath = rows.iconPath;
                this.iconUnselect = rows.iconUnselect;
                this.content = rows.content;
                this.pageType = rows.pageType;
                this.ruleId = rows.ruleId;
                if (this.type == 1) {
                    this.falg = false;
                    this.pathFlag = true;
                    this.pid = 0;
                    this.pList = [];
                } else if (this.type == 2) {
                    this.pList = [];
                    this.pathFlag = true;
                    if (this.pid == 0) {
                        this.flag = false;
                    } else {
                        this.flag = true;
                        //展示模块和子模块
                        this.getTreerule();
                    }
                } else if (this.type == 3) {
                    this.flag = true;
                    this.pList = [];
                    this.pathFlag = false;
                    //展示模块，子模块 ，页面，模块子模块禁用
                    this.getTreeList();
                } else if (this.type == 4) {
                    this.flag = true;
                    this.pathFlag = false;
                    this.pList = [];
                    //展示模块
                    //展示模块和子模块
                    for (let i = 0; i < this.list.length; i++) {
                        if (this.list[i].type == 1) {
                            this.pList.push({
                                id: this.list[i].ruleId,
                                label: this.list[i].ruleName,
                                name: this.list[i].ruleName,
                                title: this.list[i].ruleName,
                                type: this.list[i].type,
                                pid: this.list[i].pid,
                                status: this.list[i].status,
                            });
                        }
                    }
                }
            }
            this.updateModal = true;
        },
        getType(index) {
            this.type = index;
            // this.rules = null;
            if (index == 1) {
                this.flag = false;
                this.pathFlag = true;
                this.pid = 0;
            } else if (index == 2) {
                this.flag = true;
                this.pathFlag = true;
                this.pList = [];
                //展示模块和子模块
                this.getTreerule();
            } else if (index == 3) {
                this.flag = true;
                this.pathFlag = false;
                this.pList = [];
                //展示模块，子模块 ，页面，模块子模块禁用
                this.getTreeList();
            } else if (index == 4) {
                this.flag = true;
                this.pathFlag = false;
                this.pList = [];
                //展示模块
                //展示模块和子模块
                for (let i = 0; i < this.list.length; i++) {
                    if (this.list[i].type == 1) {
                        this.pList.push({
                            id: this.list[i].ruleId,
                            label: this.list[i].ruleName,
                            name: this.list[i].ruleName,
                            title: this.list[i].ruleName,
                            type: this.list[i].type,
                            pid: this.list[i].pid,
                            status: this.list[i].status,
                        });
                    }
                }
            }
        },
        getPID(index) {
            this.pid = index.id;
        },

        // 监管要求选择
        getSupervise(index){
            this.supervise = index;
        },

        // 应用场景选择
        getAppScene(index){
            this.appScene = index;
        },

        submitAll() {
            if (this.type == "") {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "权限类型不能为空",
                });
                return;
            }
            if (this.ruleName == "") {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "权限名称不能为空",
                });
                return;
            }
            if (this.shortName == "") {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "权限简称不能为空",
                });
                return;
            }
            if (this.code == "") {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "权限编码不能为空",
                });
                return;
            }
            if(this.type===1){
                if (this.supervise == "") {
                    this.$Modal.warning({
                        title: "您有必填字段",
                        content: "监管要求不能为空",
                    });
                    return;
                }
                if (this.appScene == "") {
                    this.$Modal.warning({
                        title: "您有必填字段",
                        content: "应用场景不能为空",
                    });
                    return;
                }
            }
            if (this.pid === "") {
                this.pid = 0;
            }
            if (this.sort == "") {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "排序不能为空",
                });
                return;
            }
            if (this.platform == 1) {
                if (this.type == 2) {
                    if (this.sort == "") {
                        this.$Modal.warning({
                            title: "您有必填字段",
                            content: "访问路径不能为空",
                        });
                        return;
                    }
                }
            }
            if (this.isAdd) {
                let parmas = {
                    ruleName: this.ruleName,
                    shortName: this.shortName,
                    code: this.code,
                    supervise: this.supervise,
                    appScene: this.appScene,
                    type: this.type == 4 ? 1 : this.type,
                    index: this.sort,
                    path: this.path,
                    pid: this.pid,
                    iconPath: this.iconPath,
                    iconUnselect: this.iconUnselect,
                    content: this.content,
                    pageType: this.pageType,
                    platform: this.platform,
                };
                getRuleAdd(parmas)
                    .then((res) => {
                        if (res.code == 200) {
                            this.$Message.success("操作成功");
                            this.updateModal = false;
                            this.getAllList();
                        } else {
                            this.$Message.warning(res.msg);
                        }
                    })
                    .catch((error) => {
                        console.log(error);
                    });
            } else {
                let parmas = {
                    ruleName: this.ruleName,
                    shortName: this.shortName,
                    code: this.code,
                    supervise: this.supervise,
                    appScene: this.appScene,
                    type: this.type == 4 ? 1 : this.type,
                    index: this.sort,
                    path: this.path,
                    pid: this.pid,
                    ruleId: this.ruleId,
                    iconPath: this.iconPath,
                    iconUnselect: this.iconUnselect,
                    content: this.content,
                    pageType: this.pageType,
                    platform: this.platform,
                };
                getRuleEdit(parmas)
                    .then((res) => {
                        if (res.code == 200) {
                            this.$Message.success("操作成功");
                            this.updateModal = false;
                            this.getAllList();
                        } else {
                            this.$Message.warning(res.msg);
                        }
                    })
                    .catch((error) => {
                        console.log(error);
                    });
            }
        },
        enable(rows) {
            getRuleEnable(rows.ruleId)
                .then((res) => {
                    if (res.code == 200) {
                        this.$Message.success("操作成功");
                        this.getAllList();
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        disabled(rows) {
            getRuleDisable(rows.ruleId)
                .then((res) => {
                    if (res.code == 200) {
                        this.$Message.success("操作成功");
                        this.getAllList();
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        removeRow(rows) {
            if (rows.children != undefined) {
                if (rows.children.length > 0) {
                    this.$Modal.warning({
                        title: "提示",
                        content: "该节点拥有子节点,请先删除子节点",
                    });
                    return;
                }
            }
            this.removeId = rows.ruleId;
            this.deteleModal = true;
        },
        detele() {
            getRuleDel(this.removeId)
                .then((res) => {
                    if (res.code == 200) {
                        this.$Message.success("操作成功");
                        this.deteleModal = false;
                        this.getAllList();
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        cancel(type) {
            if (type == 1) {
                this.updateModal = false;
            } else if (type == 2) {
                this.deteleModal = false;
            }
        },
    },
    mounted() {
        this.getAllList();
        this.btnList = JSON.parse(localStorage.getItem("arr"));
    },
};
</script>

<style lang="less" scoped>
@import "./../../assets/style/themeBase.less";
/deep/ .updateModal {
    .ivu-modal-body {
        height: 450px;
    }
}
.main_content {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background: #f5f5f5;
    .content{
        width: 100%;
        height: 100%;
        padding: 20px;
        box-sizing: border-box;
        background-color: #ffffff;
        .search {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            .list {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                margin-bottom: 20px;
                margin-right: 20px;
            }
        }
    }
}
.modal {
    width: 100%;
    height: auto;
    h2 {
        width: 96%;
        margin: 0 auto;
        margin-bottom: 10px;
    }
    .tag {
        width: 90%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
        .item1 {
            flex: 1;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            position: relative;
            padding-left: 16px;
            box-sizing: border-box;
            span {
                width: 60px;
            }
            .tip {
                position: absolute;
                color: red;
                left:0;
                top: 8px;
            }
            /deep/ &.imgList {
                position: relative;
                display: flex;
                justify-content: flex-start;
                margin-top: 10px;
                span{
                    width: 80px;
                }
                .item_close {
                    position: absolute;
                    right: -10px;
                    top: -10px;
                    cursor: pointer;
                }
                .avatar-uploader .el-upload {
                    position: relative;
                    border-radius: 2px;
                    cursor: pointer;
                    position: relative;
                    box-sizing: border-box;
                    background-color: #eeeeee;
                    margin-right: 20px;
                }
                .avatar-uploader .el-upload:hover {
                    border-color: var(--themeColor);
                }
                .avatar-uploader-icon {
                    font-size: 28px;
                    color: #d2d2d2;
                    width: 110px;
                    height: 110px;
                    line-height: 110px;
                    text-align: center;
                }
                .avatar {
                    width: 110px;
                    height: 110px;
                    display: block;
                }
                .img_text {
                    position: absolute;
                    bottom: 10px;
                    left: 50%;
                    transform: translateX(-50%);
                    font-size: 14px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #585858;
                }
            }
        }
    }
}
.red{
    display: inline-block;
    background-color:rgba(255, 72, 72, 0.1);
    border-radius:2px;
    border:1px solid #FF4848;
    color:#FF4848;
    padding:0 8px;
}
.green{
    display: inline-block;
    background-color: rgba(63, 207, 119, 0.1);
    border:1px solid #28D79C;
    color:#3FCF77;
    border-radius:2px;
    padding:0 8px;
}
</style>
